<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FoodKa</title>
    <!--fivicon icon-->
    <link rel="icon" href="${pageContext.request.contextPath}/assets/img/fevicon.png">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/animate.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/magnific.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/nice-select.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/owl.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/slick-slide.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/remixicon/remixicon.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/responsive.css">

    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Bebas+Neue&family=Satisfy&family=Quattrocento:wght@400;700&display=swap" rel="stylesheet">
    <style>
        .userphone{
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            left: 10px;
        }
        .userphone img{
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            left: 10px;
        }
        .user_data{
            display: none;
            position: absolute;
            text-align: left;
            width: 210px;
            margin: 0;
            padding: 0;
            list-style: none;
            left: 0;
            top: 100%;
            background-color: #fff;
            border-radius: 0;
        }
        .userphone:hover .user_data{
            display: inline-block;
        }
        .user_data:hover{
            display: inline-block;
        }
        .user_data div{
            margin-left: 5px;
            display: block;
            margin-left: 0;
            line-height: 22px;
            font-size: 15px;
            border-bottom: 1px solid #f5f5f5;
            color: #050a30;
            font-weight: 500;
            height: 40px;
        }
        .teet{
            display: block;
            padding: 10px 20px;
            color: #050a30;
            font-size: 14px;
            font-weight: 500;
            position: relative;
        }

    </style>

</head>
<body class='sc5'>
    <!-- preloader area start -->
    <div class="preloader" id="preloader">
        <div class="preloader-inner">
            <div id="wave1">
            </div>
            <div class="spinner">
                <div class="dot1"></div>
                <div class="dot2"></div>
            </div>
        </div>
    </div>
    <!-- preloader area end -->
    <!-- search popup area start -->
    <div class="body-overlay" id="body-overlay"></div>
    <div class="td-search-popup" id="td-search-popup">
        <form action="index.jsp" class="search-form">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search.....">
            </div>
            <button type="submit" class="submit-btn"><i class="fa fa-search"></i></button>
        </form>
    </div>
    <!-- //. search Popup -->

    <!-- navbar start -->
    <header class="navbar-area">
        <nav class="navbar navbar-expand-lg">
            <div class="container nav-container">
                <div class="responsive-mobile-menu">
                    <button class="menu toggle-btn d-block d-lg-none" data-target="#themefie_main_menu" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="icon-left"></span>
                        <span class="icon-right"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="themefie_main_menu">
                    <ul class="navbar-nav menu-open">
                        <li class="current-menu-item menu-item-has-children">
                            <a href="${pageContext.request.contextPath}/home-1.jsp">HOME</a>
                            <ul class="sub-menu ps-0">
                                <li><a href="${pageContext.request.contextPath}/home-1.jsp">Home 01</a></li>
                            </ul>
                        </li>
                        <li class="current-menu-item menu-item-has-children">
                            <a href="${pageContext.request.contextPath}/#">页面</a>
                            <ul class="sub-menu ps-0">
                                <li><a href="about.jsp">关于</a></li>
                                <li><a href="blog.jsp">博客</a></li>
                                <li><a href="blog-details.jsp">博客详细信息</a></li>
                                <li><a href="/foods.let?type=findall">菜单</a></li>
                                <li><a href="foods.let?type=menuList&pageIndex=1">菜单列表</a></li>
                                <li><a href="shop.let?type=findShop&pageIndex=1">店铺</a></li>
                                <li><a href="cart.jsp" onclick="jiaru()">购物车</a></li>
                                <li><a href="checkout.jsp">Checkout</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/about.jsp">关于我们</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/contact.jsp">联系人</a>
                        </li>
                    </ul>
                </div>
                <div class="logo">
                    <a class="main-logo" href="${pageContext.request.contextPath}/home-1.jsp"><img src="${pageContext.request.contextPath}${pageContext.request.contextPath}/assets/img/logo.png" alt="img"></a>
                </div>
                <div class="nav-right-part nav-right-part-mobile">
                    <ul>
                        <li><a class="search" href="${pageContext.request.contextPath}/#"><i class="ri-search-line"></i></a>
                        </li>
                        <li class="phone-contact d-md-block d-none"><i class="ri-phone-fill float-start"></i> +997 509 153 849
                        </li>
                        <li class="menu-cart"><a href="foods.let?type=findCart&userId=${user.id}">购物车 <span>${cartNum}</span></a></li>
                        <li class="userphone">

                        </li>
                    </ul>
                </div>
                <div class="nav-right-part nav-right-part-desktop">
                    <ul>
                        <li><a class="search" href="${pageContext.request.contextPath}/#"><i class="ri-search-line"></i></a>
                        </li>
                        <li class="phone-contact"><i class="ri-phone-fill float-start"></i> +997 509 153 849
                        </li>
                        <li class="menu-cart"><a href="foods.let?type=findCart&userId=${user.id}">购物车 <span>${cartNum}</span></a></li>
                        <li class="userphone">
                            <c:if test="${user==null}">
                            <a href="${pageContext.request.contextPath}/login.jsp">
                                <img src="${pageContext.request.contextPath}/assets/img/img.png" >
                                </c:if>
                                <c:if test="${user!=null}">
                                    <img src="${pageContext.request.contextPath}${user.image}">
                                    <div class="user_data">
                                        <div><a href="PersonalCenter/main.jsp" class="teet">个人中心</a></div>
                                        <div><a href="login.let?type=exit" class="teet">退出</a></div>
                                    </div>
                                </c:if>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <!-- navbar end -->

    <!-- bredcrumb Area Start-->
    <section class="breadcrumb-area">
        <div class="banner-bg-img"></div>
        <div class="banner-shape-1"><img src="${pageContext.request.contextPath}assets/img/banner/shape-1.png" alt="img"></div>
        <div class="banner-shape-2"><img src="${pageContext.request.contextPath}assets/img/banner/shape-2.png" alt="img"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 align-self-center">
                    <div class="banner-inner text-center">
                        <h3>查看
                        </h3>
                        <h1>交货和付款信息
                        </h1>
                        <nav aria-label="breadcrumb">
                            <ul class="breadcrumb">
                              <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/home.html">Home</a></li>
                              <li class="breadcrumb-item active" aria-current="page">查看</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- bredcrumb Area End --> 

    <!-- checkout area start -->
    <div class="checkout-area pd-top-120 pd-bottom-120">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-7">
                    <div class="bill-payment-wrap">
                        <h5>结算明细
                        </h5>
                        <form class="default-form-wrap style-2">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>姓名</label>
                                    <div class="single-input-wrap">
                                        <input type="text" class="form-control" placeholder="Your Name" value="${user.name}">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <label>国家</label>
                                    <div class="single-input-wrap">
                                        <input type="text" class="form-control" placeholder="Type Your Country" value="${user.countries}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label>街道地址</label>
                                    <div class="single-input-wrap">
                                        <input type="text" class="form-control" placeholder="Address" value="${user.address}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label>联系电话</label>
                                    <div class="single-input-wrap">
                                        <input type="text" class="form-control" placeholder="Address" value="${user.phone}">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>                    
                </div>
                <div class="col-lg-5">
                    <div class="order-area">
                        <h5 class="title">你的订单</h5>
                        <c:forEach items="${orders}" var="order">
                        <div class="order-product">
                            <div class="thumb">
                                <img src="${order.photo}" alt="img">
                            </div>
                            <div class="details">
                                <h6>${order.name}</h6>
                                <ul>
                                    <li><span>选择数量: </span>${order.number}</li>
                                    <li><span id="money">价格: </span>${order.money}*${order.number}</li>
                                </ul>
                            </div>
                        </div>
                        </c:forEach>
<%--                        <ul class="amount">--%>
<%--                            <li>Subtotal<span>$${orders.subtotal}</span></li>--%>
<%--                            <li class="total">全部的<span>${orders.subtotal}</span></li>--%>
<%--                        </ul>--%>
<%--                        <div class="peyment-method">--%>
<%--                            <h6>检查付款</h6>--%>
<%--                            <ul class="card-area">--%>
<%--                                <li>--%>
<%--                                    <div class="form-check">--%>
<%--                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">--%>
<%--                                        <label class="form-check-label" for="flexRadioDefault1">--%>
<%--                                        </label>--%>
<%--                                    </div>--%>
<%--                                    <div class="details">--%>
<%--                                        <h6>信用卡 <img src="${pageContext.request.contextPath}assets/img/icon/peyment-card.png" alt="img"></h6>--%>
<%--                                        <p>用visa, Anex, MasterCard, Maestro,Discover和其他许多信用卡和借记卡支付。</p>--%>
<%--                                    </div>--%>
<%--                                </li>--%>
<%--                                <li>--%>
<%--                                    <div class="form-check">--%>
<%--                                        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">--%>
<%--                                        <label class="form-check-label" for="flexRadioDefault2">--%>
<%--                                        </label>--%>
<%--                                    </div>--%>
<%--                                    <div class="details">--%>
<%--                                        <h6>PayPal <img src="${pageContext.request.contextPath}assets/img/icon/paypal-card.png" alt="img"></h6>--%>
<%--                                        <p>使用PayPal轻松，快速和安全付款.</p>--%>
<%--                                    </div>--%>
<%--                                </li>--%>
<%--                            </ul>--%>
<%--                        </div>--%>
                        <a class="btn btn-secondary w-100" id="paymoney" href="/Order.let?type=orderPay&userId=${user.id}"> 下订单</a>
                    </div>                
                </div>
            </div>
        </div>
    </div>
    <script>
       var size = window.innerWidth;
    document.getElementById('paymoney').href = '/Order.let?type=orderPay&userId=${user.id}&size='+size;
       console.log(document.getElementById('paymoney').href = '/Order.let?type=orderPay&userId=${user.id}&size='+size)
    </script>
    <!-- checkout area end -->

    <!-- footer area start -->
    <footer class="footer-area pd-top-100">
        <div class="footer-inner padding-top-100 padding-bottom-65">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-sm-6">
                        <div class="footer-widget widget">
                            <div class="logo">
                                <img src="${pageContext.request.contextPath}assets/img/logo.png" alt="img">
                            </div>
                            <ul class="contact_info_list">
                                <li class="single-info-item">
                                    <img src="${pageContext.request.contextPath}assets/img/icon/location.png" alt="icon">
                                    <div class="details">
                                        4920 Trails End Road Ft  美国, 佛罗里达州33311
                                    </div>
                                </li>
                                <li class="single-info-item">
                                    <img src="${pageContext.request.contextPath}assets/img/icon/envelope.png" alt="icon">
                                    <div class="details">
                                        ordernow@foodka.com
                                    </div>
                                </li>
                                <li class="single-info-item">
                                    <img src="${pageContext.request.contextPath}assets/img/icon/phone.png" alt="icon">
                                    <div class="details">
                                        +997 509 153 849
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="footer-widget widget widget_link">
                            <h4 class="widget-title">热门菜单</h4>
                            <ul>
                                <li><a href="${pageContext.request.contextPath}/menu-list.jsp">汉堡王沃珀</a></li>
                                <li><a href="${pageContext.request.contextPath}/menu-list.jsp">五个家伙芝士汉堡</a></li>
                                <li><a href="${pageContext.request.contextPath}/menu-list.jsp">肯德基原始食谱鸡</a></li>
                                <li><a href="${pageContext.request.contextPath}/menu-list.jsp">温迪的霜冻</a></li>
                                <li><a href="${pageContext.request.contextPath}/menu-list.jsp">麦当劳的快乐餐</a></li>
                                <li><a href="${pageContext.request.contextPath}/menu-list.jsp">多米诺的意大利辣香肠比萨饼</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="footer-widget widget widget_link">
                            <h4 class="widget-title">营业时间</h4>
                            <ul>
                                <li>星期一 : 09.00am-10.00pm</li>
                                <li>星期二 : 09.00am-10.00pm</li>
                                <li>星期三 : 09.00am-10.00pm</li>
                                <li>星期四 : 09.00am-10.00pm</li>
                                <li>星期五  : 09.00am-10.00pm</li>
                                <li>星期六 & 星期天 : <span>关闭</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="footer-widget widget widget_instagram_feeds">
                            <h4 class="widget-title">Instagram提要</h4>
                            <ul>
                                <li><a href="${pageContext.request.contextPath}/#"><img src="${pageContext.request.contextPath}assets/img/instagram/1.png" alt="instagram" /></a></li>
                                <li><a href="${pageContext.request.contextPath}/#"><img src="${pageContext.request.contextPath}assets/img/instagram/2.png" alt="instagram" /></a></li>
                                <li><a href="${pageContext.request.contextPath}/#"><img src="${pageContext.request.contextPath}assets/img/instagram/3.png" alt="instagram" /></a></li>
                                <li><a href="${pageContext.request.contextPath}/#"><img src="${pageContext.request.contextPath}assets/img/instagram/4.png" alt="instagram" /></a></li>
                                <li><a href="${pageContext.request.contextPath}/#"><img src="${pageContext.request.contextPath}assets/img/instagram/5.png" alt="instagram" /></a></li>
                                <li><a href="${pageContext.request.contextPath}/#"><img src="${pageContext.request.contextPath}assets/img/instagram/6.png" alt="instagram" /></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6 text-md-start text-center">
                        <div class="copyright-area">
                            <p>© 2021年Foodka。Themefie保留所有权利</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <ul class="social-area text-md-end text-center mt-md-0 mt-2">
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fab fa-behance"></i></a></li>
                            <li><a href="/#"><i class="fab fa-google-plus-g"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer area end -->    

    <!-- back-to-top end -->
    <div class="back-to-top">
        <span class="back-top"><i class="fas fa-angle-double-up"></i></span>
    </div>

    

    <!-- all plugins here -->
    <script src="${pageContext.request.contextPath}/assets/js/jquery.3.6.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/jquery-ui.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/imageloded.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/counterup.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/waypoint.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/magnific.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/isotope.pkgd.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/nice-select.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/fontawesome.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/owl.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/slick-slider.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/wow.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/tweenmax.min.js"></script>
    <!-- main js  -->
    <script  src="${pageContext.request.contextPath}/assets/js/main.js"></script>
</body>
</html>